<template>
  <div>
    <div :style="{ marginBottom: '16px' }">
      <a-button @click="add">
        ADD
      </a-button>
    </div>
    <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
      <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
        {{ pane.content }}
        <group-detail></group-detail>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import groupDetail from './modules/GroupDetail.vue'
  export default {
    name: 'Group',
    components: {
      groupDetail
    },
    data () {
      const panes = [
        { title: '角色类型', content: 'Content of Tab 1', key: '1' },
        { title: '部门类型', content: 'Content of Tab 2', key: '2' }
      ];
      return {
        activeKey: panes[0].key,
        panes,
        newTabIndex: 0
      };
    },
    methods: {
      callback (key) {
        console.log(key);
      },
      onEdit (targetKey, action) {
        this[action](targetKey);
      },
      add () {
        const panes = this.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({
          title: `New Tab ${activeKey}`,
          content: `Content of new Tab ${activeKey}`,
          key: activeKey
        });
        this.panes = panes;
        this.activeKey = activeKey;
      },
      remove (targetKey) {
        let activeKey = this.activeKey;
        let lastIndex;
        this.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });
        const panes = this.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
          if (lastIndex >= 0) {
            activeKey = panes[lastIndex].key;
          } else {
            activeKey = panes[0].key;
          }
        }
        this.panes = panes;
        this.activeKey = activeKey;
      }
    }
  };
</script>

<style>
</style>
